<template>
  <div class="toComment">
    <div v-for="(info,index) in orderInfo" :key="index">
      <div class="bookInfo">
        <img class="bookImg" :src="$store.state.baseImgUrl+info.book.img">
        <div class="content">
          <span class="name">{{ info.book.name }}</span><br>
          <span class="title">价格</span><span class="price">{{ info.book.price |rounding }}</span> 元<br>
          <span class="title">配送</span><span class="a">快递（包邮）</span><br>
          <span class="title">商品属性</span>
          <div class="shuxing">
            图书规格：{{ info.book.spec }}<br><br>
            包装装订：{{ info.book.binding }}<br><br>
            印张/字数：{{ info.book.sheet }}/{{ info.book.words }}
          </div>
        </div>
      </div>
      <div class="comment">
        <span class="head">其他买家，需要你的建议哦！</span><br>
        <el-input
            maxlength="1024"
            class="text"
            type="textarea"
            :rows="8"
            placeholder="宝贝已经用了一段时间了，有更多宝贝使用心得？分享给想买的他们吧！"
            resize="none"
            autofocus
            v-model="comment[index]"
            :disabled="readDisabled"
        >
        </el-input>
        <span class="b">关于商品</span>
        <span class="c">评分：</span>
        <el-rate
            class="star"
            :colors="colors"
            v-model="value[index]"
            show-text
            text-color="gray"
            :disabled="readDisabled"
        >
        </el-rate>
        <br>
      </div>
    </div>
    <div class="btn">
      <el-button @click="upComment" v-if="!readDisabled">提交评价</el-button>
    </div>
    <div>
      <Browse></Browse>
    </div>
  </div>
</template>

<script>
import Browse from "../Browse";
export default {
  name: "toComment.vue",
  components:{Browse},
  data() {
    return {
      orderInfo: [],
      comment: [],
      value: [],
      colors: {1: '#a2b3cb', 2: '#8fd1f5', 3: '#f5c045', 4: '#f77c2a', 5: '#f14444'},
      readDisabled: false
    }
  },
  methods: {
    upComment() {
      let coms = []
      for (let i = 0; i < this.orderInfo.length; i++) {
        coms.push({
          content: this.comment[i],
          did: this.orderInfo[i].id,
          start: this.value[i]
        })
      }
      const params={comments:coms}
      this.postRequest('/oms/bookOrder/comments', params).then((resp) => {
        if(resp!=null){
          this.$message.success("评论成功")
        }
      }).then(() => {
        this.$router.push({
          path: '/myOrder',
        })
      })
    },
    getList() {
      this.value = []
      for (let i = 0; i < this.orderInfo.length; i++) {
        if (this.orderInfo[i].comment == null) {
          this.readDisabled = false
        } else {
          this.comment.push(this.orderInfo[i].comment.content)
          this.value.push(this.orderInfo[i].comment.star)
          this.readDisabled = true
        }
      }
    }
  },
  created() {
    if (this.$route.query.oid) {
      this.orderId = this.$route.query.oid
    } else {
      this.$router.push('/myOrder')
    }
    this.getRequest('/oms/bookOrder/' + this.orderId).then((resp) => {
      this.orderInfo = resp.data.details
    }).then(() => {
      this.getList()
    })
  }
}
</script>

<style scoped>
.toComment {
  padding-bottom: 100px;
  margin-top: 30px;
}

.bookInfo {
  border-top: 1px solid #e2dfdf;
}

.bookImg {
  position: absolute;
  width: 450px;
  height: 450px;
  padding: 4px;
  border: 1px solid #e2dfdf;
  border-top: none;
}

.content {
  position: relative;
  top: -2px;
  left: 515px;
  width: 55%;
}

.name {
  display: inline-block;
  margin-top: 35px;
  font: 600 24px 宋体;
}

.title {
  display: inline-block;
  font: 400 18px 宋体;
  color: #999797;
  width: 120px;
  border: none;
  margin-bottom: 19px;
}

.price {
  display: inline-block;
  margin-top: 40px;
  font: bold 35px 华文宋体;
  color: #cb0404;
  position: relative;
  top: 6px;
}

.shuxing {
  position: relative;
  top: -15px;
  border: 1px solid #e2dfdf;
  background: #fcf7f7;
  padding: 33px;
  font: 400 18px 宋体;
  margin-bottom: 5px;
}

.a {
  font: 400 18px 宋体;
}

.comment {
  margin-top: 20px;
  border: 1px solid #e2dfdf;
  margin-bottom: 40px;
}

.head {
  display: inline-block;
  padding: 30px;
  padding-left: 55px;
  font: 600 25px 黑体;
  color: #4c4b4b;
}

.text {
  width: 50%;
  margin-left: 55px;
  margin-bottom: 35px;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner{
  color: #848080;
}
.b {
  display: inline-block;
  position: absolute;
  left: 57%;
  width: 19%;
  border-bottom: 1px solid #e2dfdf;
  font: 600 20px 宋体;
  color: #767474;
  padding-bottom: 15px;
  padding-top: 10px;
}

.c {
  position: relative;
  left: 7%;
  top: -90px;
}

.star {
  position: relative;
  left: 67%;
  top: -120px;
}

::v-deep .el-rate__icon {
  font-size: 40px;
}

::v-deep .el-rate__text {
  font-size: 20px;
  margin-left: 5px;
}

.btn {
  margin-top: 10px;
  text-align: center;
}

::v-deep .el-button {
  font: bold 21px 宋体;
  padding: 10px 16px 10px 19px;
  letter-spacing: 2px;
  color: whitesmoke;
  background: #e05353;
}

::v-deep .el-button:hover {
  color: whitesmoke;
  background: #c43737;
}
</style>